@page "/signin"
@inherits AppAuthComponentBase
@inject ServiceStackStateProvider AuthStateProvider
@inject NavigationManager NavigationManager

@if (IsAuthenticated)
{
    NavigationManager.NavigateTo(NavigationManager.GetReturnUrl(), true);
    return;
}

<h1 class="mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
    Sign In
</h1>

<div class="max-w-screen-md">

<form @onsubmit="submit" class="max-w-xl">
<CascadingValue Value=@api.Error>
    <div class="shadow overflow-hidden sm:rounded-md">
        <ErrorSummary Except=@VisibleFields />

        <div class="px-4 py-5 bg-white dark:bg-black space-y-6 sm:p-6">
            <div class="flex flex-col gap-y-4">
                <TextInput @bind-Value="request.UserName" spellcheck="false" Help="Email address" />
                <TextInput type="password" @bind-Value="request.Password" spellcheck="false" />
                <CheckboxInput @bind-Value="request.RememberMe" />
            </div>
        </div>

        <div class="m-6">
            <div class="relative">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="bg-white dark:bg-black px-2 text-gray-500">Or continue with</span>
                </div>
            </div>
            <div class="mt-6 grid grid-cols-3 gap-3">
                <div>
                    <a href=@("/auth/facebook?continue=" + NavigationManager.GetReturnUrl()) class="inline-flex w-full justify-center rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-black py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
                        <span class="sr-only">Sign in with Facebook</span>
                        <svg class="h-5 w-5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path></svg>
                    </a>
                </div>
                <div>
                    <a href=@("/auth/google?continue=" + NavigationManager.GetReturnUrl()) class="inline-flex w-full justify-center rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-black py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
                        <span class="sr-only">Sign in with Google</span>
                        <svg class="h-5 w-5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M11.99 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05c0 5.71-3.83 9.77-9.6 9.77c-5.52 0-10-4.48-10-10S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.98-1.48-3.85-1.48c-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22h-5.51v-.01z" fill="currentColor"></path></svg>
                    </a>
                </div>
                <div>
                    <a href=@("/auth/microsoftgraph?continue=" + NavigationManager.GetReturnUrl()) class="inline-flex w-full justify-center rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-black py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
                        <span class="sr-only">Sign in with Microsoft</span>
                        <svg class="h-5 w-5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M11.55 21H3v-8.55h8.55V21zM21 21h-8.55v-8.55H21V21zm-9.45-9.45H3V3h8.55v8.55zm9.45 0h-8.55V3H21v8.55z" fill="currentColor"></path></svg>
                    </a>
                </div>
            </div>
        </div>

        <div class="pt-5 px-4 py-3 bg-gray-50 dark:bg-gray-800 text-right sm:px-6">
            <div class="flex justify-end">
                <FormLoading class="flex-1" Loading=@api.IsLoading />
                <SecondaryButton href="/signup" class="mr-2">
                    Register New User
                </SecondaryButton>
                <PrimaryButton type="submit">
                    Login
                </PrimaryButton>
            </div>
        </div>
    </div>
</CascadingValue>
</form>

<div class="flex mt-8">
    <h3 class="hidden xs:block mr-4 leading-8 text-gray-500 dark:text-gray-400">Quick Links</h3>
    <span class="relative z-0 inline-flex shadow-sm rounded-md">
        <button @onclick='_ => SetUser("admin@email.com", "p@55wOrd")'
            class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-black text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
            admin@email.com</button>
        <button @onclick='_ => SetUser("manager@email.com", "p@55wOrd")'
            class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-black text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
            manager@email.com</button>
        <button @onclick='_ => SetUser("employee@email.com", "p@55wOrd")'
            class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-black text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
            employee@email.com</button>
        <button @onclick='_ => SetUser("new@user.com", "p@55wOrd")'
            class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-black text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
            new@user.com</button>
    </span>
</div>
    
<div class="mt-4">
    <SrcLink href="https://github.com/NetCoreTemplates/blazor-tailwind/blob/master/MyApp.Client/Pages/SignIn.razor" IconSrc="/img/blazor.svg" />
</div>

</div>

@code {
    string[] VisibleFields => new[]{ nameof(Authenticate.UserName), nameof(Authenticate.Password) };

    ApiResult<AuthenticateResponse> api = new();

    Authenticate request = new();

    void SetUser(string email, string password)
    {
        request.UserName = email;
        request.Password = password;
    }

    async Task submit()
    {
        api.ClearErrors();

        if (request.UserName.IsNullOrEmpty())
            api.AddFieldError(nameof(request.UserName), "Email is required");

        if (request.Password.IsNullOrEmpty())
            api.AddFieldError(nameof(request.Password), "Password is required");

        if (api.Failed) return;

        api.IsLoading = true;
        api = await AuthStateProvider.LoginAsync(request.UserName, request.Password);

        if (api.Succeeded)
            NavigationManager.NavigateTo(NavigationManager.GetReturnUrl(), forceLoad: true);
    }
}
